<template>
  <div>
    <div class="px-3">
      <el-tag type="info" effect="plain" :key="index" closable class="mr-3 mb-2" @close="delTag(index)"
        v-for="(item, index) in tagList">{{ item }}</el-tag>
    </div>

    <div class="d-flex p-3" style="height: 300px;">
      <div class="shadow rounded-lg mr-4 p-3" style="width: 150px;">
        <div class="d-flex justify-content-between py-2 pointer" v-for="(item, index) in tagSelectList" :key="index"
          @click="tagSelectIndexChange(index)">
          <div :class="tagSelectIndex == index ? 'text-primary' : ''">{{ item }}</div>
          <i class="el-icon-arrow-right text-primary" v-if="tagSelectIndex == index"></i>
        </div>
      </div>

      <div class="shadow rounded-lg col over-auto p-3">
        <div class=" " v-if="tagSelectIndex == 0">
          <el-select @change="moudleChange" size="mini" v-model="moudle" placeholder="请选择设备模型"
            style="width: 100%;margin-bottom: 5px;">
            <el-option v-for="item in modelList" :key="item.modelCode" :label="item.modelName" :value="item.modelCode">
            </el-option>
          </el-select>
          <el-button size="mini" v-for="(item, index) in modelListParams"
            @click="pushString('0', item.parValue, item.parKey)" class="ml-0 mr-3 mb-3" style="width: 100%;">{{
              item.parValue
            }}</el-button>
        </div>
        <div class=" " v-if="tagSelectIndex == 1">
          <el-select @change="valueChange" size="mini" v-model="value" placeholder="请选择设备模型值"
            style="width: 100%;margin-bottom: 5px;">
            <el-option v-for="item in modelList" :key="item.modelCode" :label="item.modelName" :value="item.modelCode">
            </el-option>
          </el-select>
          <el-button size="mini" v-for="(item, index) in modelListValueParams"
            @click="pushString('1', item.parValue, item.parKey)" class="ml-0 mr-3 mb-3" style="width: 100%;">{{
              item.parValue
            }}</el-button>
        </div>
        <div class=" over-auto" v-if="tagSelectIndex == 2">
          <el-button size="mini" v-for="(item, index) in symbolList" @click="pushString('2', item)" class="ml-0 mr-3 mb-3"
            style="width: 118px;">{{ item }}</el-button>

        </div>
        <div class=" " v-if="tagSelectIndex == 3">
          <el-input size="mini" type="textarea" placeholder="请输入" v-model="tagInput"
            @blur="pushString('3', tagInput)"></el-input>
        </div>
        <div class=" " v-if="tagSelectIndex == 4">
          <el-date-picker size="mini" v-model="timeValue" type="datetime" placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss" @blur="pushString('4', timeValue)"
            style="width: 188px;margin-bottom: 10px;">
          </el-date-picker>
          <el-button size="mini" @click="pushString('4', 'SYS_TIME')" class="ml-0 mr-3 mb-3" style="width: 188px;">
            系统时间
          </el-button>
          <el-button size="mini" @click="pushString('4', 'SYS_TIME_HMS')" class="ml-0 mr-3 mb-3" style="width: 188px;">
            系统时间(时分秒)
          </el-button>
        </div>
      </div>
    </div>
    <div style="width: 100%; text-align: center;" v-if="$route.query.type != 2">
      <el-button type="primary" @click="saveLogic">保存</el-button>
      <!-- <el-button type="primary" @click="saveLogic">保存</el-button> -->
    </div>
  </div>
</template>

<script>
import { queryDeviceModelParamList, queryDeviceModelList, queryDeviceModelParamValueList } from "@/api/workflow/index"
export default {
  data () {
    return {
      tagInput: '',
      symbolList: ['(', ')', '+', '-', '*', '/', '>', '<', '==', '&&', '||'],
      modelListParams: [],
      modelListValueParams: [],
      tagSelectList: ['设备模型参数', '设备模型参数值', '符号', '输入框', '时间选择'],
      tagSelectIndex: 0,
      mapString: [],
      tagList: [],
      modelList: [],
      value: '',
      moudle: '',
      timeValue: ''
    }
  },
  props: {
    capList: {
      type: Array,
      default: []
    },
  },
  mounted () {
    if (this.capList) {
      let data = this.capList
      this.mapString = data
      data.forEach(element => {
        this.tagList.push(element.seqValueDes)
      })
    }
    this.getDeviceModelList()
  },
  methods: {
    pushString (type, val, code) {
      this.tagList.push(val)
      this.mapString.push({
        type: type,
        seqValue: code ? code : val,
        seqValueDes: val,
      })
    },
    delTag (index) {
      this.tagList.splice(index, 1)
      this.mapString.splice(index, 1)
    },
    async getDeviceModelList () {
      const res = await queryDeviceModelList()
      if (res.status == 200) {
        this.modelList = res.object
      }
    },
    tagSelectIndexChange (index) {
      this.tagSelectIndex = index
    },
    moudleChange (val) {
      this.getDeviceModelParamList(val)
    },
    valueChange (val) {
      this.getDeviceModelParamValueList(val)
    },
    async getDeviceModelParamList (val) {
      const res = await queryDeviceModelParamList({
        modelCode: val
      })
      if (res.status == 200) {
        this.modelListParams = res.object
      }
    },
    async getDeviceModelParamValueList (val) {
      const res = await queryDeviceModelParamValueList({
        modelCode: val
      })
      if (res.status == 200) {
        this.modelListValueParams = res.object
      }
    },
    saveLogic () {
      this.$emit('saveQZTJ', this.mapString)
    }
  }
}
</script>


<style></style>
